<template>
	<div class="image-title display" ref="ui" :style="imageUrlStyle" :class="[size ? 'large' : 'small']">
		<div class="display-col image-content">
			<div class="font-size-20 font-weight-700" :class="{ 'image-content-smalltitle': !size }">{{ title }}</div>
			<div v-if="content" class="font-size-12 font-weight-300">{{ content }}</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'imageTitle',
	props: {
		size: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: '',
		},
		content: {
			type: String,
			default: '',
		},
		imageUrl: {
			type: String,
			default: '',
		},
	},
	watch: {
		imageUrl(val) {
			this.imageUrlStyle = `background-image: linear-gradient(to bottom, transparent 60%, black), url(${val})`
		}
	},
	data() {
		return {
			imageUrlStyle: `background-image: linear-gradient(to bottom, transparent 60%, black), url(${this.imageUrl})`,
		};
	},
};
</script>

<style lang="scss" scoped>
.image-content {
	align-items: flex-start;
	color: #ffffff;
	font-weight: 500;
	margin: 0 0 .241546rem .241546rem;

	.image-content-smalltitle {
		font-size: .386473rem;
		font-weight: 300;
	}
}
.image-title {
	border-radius: .193237rem;
	align-items: flex-end;
	background-repeat: no-repeat;
	background-size: cover;

}
.large {
	width: 100%;
	height: 100%;
}
.small {
	width: 100%;
	height: 100%;
}
</style>
